<script setup lang="ts">
import {CrowdLabelInterface} from "~/contentScripts/views/wxt/BatchAddingProducts/components/Crowd/CrowdInterface";
import CrowdTopicTemplatePanel
  from "~/contentScripts/views/wxt/BatchAddingProducts/components/Crowd/CrowdTopicTemplatePanel.vue";
import LabelFindListCrowdPanel
  from "~/contentScripts/views/wxt/BatchAddingProducts/components/Crowd/LabelFindListCrowdPanel.vue";
import {WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
  materialIdList: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  campaignId: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  recSceneList: {
    type: Array as PropType<string[]>,
    default: () => ['recSceneNew'],
  },
});
const emit = defineEmits([
  "update:value",
]);
const crowd = ref<CrowdLabelInterface[]>([]);
const tabs = ref<any[]>(
    [
      {
        title: '计划专享推荐',
        component: CrowdTopicTemplatePanel,
        topicId:'439',
        labelList: undefined,
        value: [],
      },

      {
        title: '平台拉新',
        component: CrowdTopicTemplatePanel,
        labelList: undefined,
        topicId: undefined,
        tabs:[
          {
            title: '平台高价值',
            labelList: undefined,
            topicId: 459,
          },
          {
            title: '策略人群',
            labelList: undefined,
            topicId: 460,
          },
        ],
        value: [],
      },
      {
        title: '品类破圈',
        component: CrowdTopicTemplatePanel,
        labelList: undefined,
        topicId: undefined,
        tabs:[
          {
            title: '行业拉新',
            labelList: undefined,
            topicId: 461,
          },
          {
            title: '类目拉新',
            labelList: undefined,
            topicId: 462,
          },
          {
            title: '竞对抢夺',
            labelList: undefined,
            topicId: 463,
          },
        ],
        value: [],
      },
      {
        title: '场景运营',
        component: CrowdTopicTemplatePanel,
        labelList: undefined,
        topicId: undefined,
        tabs:[
          {
            title: '大促场景',
            labelList: undefined,
            topicId: 464,
          },
          {
            title: '内容场景',
            labelList: undefined,
            topicId: 465,
          },
          {
            title: '热门场景',
            labelList: undefined,
            topicId: 466,
          },
          {
            title: '全域联动',
            labelList: undefined,
            topicId: 467,
          },
        ],
        value: [],
      },
      {
        title: '私域转化',
        component: CrowdTopicTemplatePanel,
        labelList: undefined,
        topicId: undefined,
        tabs:[
          {
            title: '品牌资产',
            labelList: undefined,
            topicId: 468,
          },
          {
            title: '店铺资产',
            labelList: undefined,
            topicId: 469,
          },
        ],
        value: [],
      },
      // {
      //   title: '历史常用',
      //   component: CrowdTopicTemplatePanel,
      //   topicId:'439',
      //   labelList: undefined,
      //   value: [],
      // },
    ]
);
watch(() => tabs.value, (val) => {
  // 将所有tab下value合并
  let allValue:any[] = [];
  val.forEach((item: any) => {
    allValue = allValue.concat(item.value);
  });
  emit('update:value', allValue);
}, {
  deep: true,
});
</script>

<template>
  <!--{{tabs}}-->
  <a-tabs size="small" style="margin-top: -10px;">
    <a-tab-pane v-for="(tab, index) in tabs" :key="index" :tab="tab.title">
      <component :is="tab.component" :labelList="tab.labelList" :bizCode="bizCode" :materialIdList="materialIdList"
                 :campaignId="campaignId" :recSceneList="recSceneList" v-model:value="tab.value" :topicId="tab.topicId" :tabs="tab.tabs"
      />
    </a-tab-pane>
  </a-tabs>
</template>

<style scoped>

</style>
